<template>
<div class="sing-in-head">
    <h2><span class="icon-shijian"></span>签到</h2>
    <ul>
        <li>
            <router-link to="/rule" :class="{active : active === 'index'}">签到规则</router-link>
        </li>
        <li><a href="javascript:;">签到对象</a></li>
        <li>
            <router-link to="/jiaqi" :class="{active : active === 'jiaqi'}">假期设定</router-link>
        </li>
        <li><a href="javascript:;">签到统计</a></li>
        <li>    
            <router-link to="/help" :class="{active : active === 'help'}">签到帮助</router-link>
        </li>

    </ul>
</div>
</template>


<style lang="scss">

.sing-in-head{
    height: 50px;
    line-height: 50px;
    background-color: #f7f7f7;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.50);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9;
    h2{
        display: inline-block;
        padding: 0 2rem 0 1.4rem;
        vertical-align: top;
        font-size: 14px;
        font-weight: 500;
        color: #999;
        position: relative;
        &:after{
            position: absolute;
            content: "";
            display: block;
            right: 0;
            top: .8rem;
            bottom: .8rem;
            width: 1px;
            border-right: 1px solid #e3e3e3;
        }
        span{
            margin-right: .3rem;
            font-size: 1.6rem;
            vertical-align: bottom;
            display: inline-block;
        }
    }
    ul{
        vertical-align: top;
        display: inline-block;
        padding-left: 1rem;
        white-space: nowrap;
    }

    li{
        display: inline-block;
        padding: 0 7px;
        a{
            display: inline-block;
            color: #333;
            line-height: 48px;
            min-width: 60px;
            text-align: center;
            &:hover{
                color: #5785E7;
            }
        }
        a.active{
            border-bottom: 2px solid #5785E7;
            color: #5785E7;
        }
    }
}

</style>

<script>
    export default {
        name: "SignInHead",
        data () {
            return {
                active : 'index'
            }
        },

        watch : {
            '$route'(to) {
                this.active = to && to.matched && to.matched[0] ? to.matched[0].name : 'index';
            }
        },

    }
</script>